<template>
    <basic-container>
        <TitleComponent mainTitle="理财购买记录" />
        <avue-data-panel :option="sum_option"></avue-data-panel>
        <!-- <div class="investment-summary">
            <el-card shadow="hover">
                <div slot="header">
                    <span>总投资金额</span>
                </div>
                <div class="investment-amount">
                    {{ totalInvestment }}
                </div>
            </el-card>
        </div> -->
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @on-load="onLoad" @select="handleSelect">

            <template #menu-left="{ row }">
                <el-button type="danger" size="small" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
            </template>

            <!-- <template slot="menuLeft">
                <el-button type="danger" size="small" plain icon="el-icon-delete"
                    v-if="permission.user_delete" @click="handleDelete">删 除
                </el-button>
            </template>
 -->

            <template #test6="{ row }">
                <el-tag type="success" v-if="row.test6 == '0'"> 收益中</el-tag>
                <el-tag type="primary" v-else="row.test6 == '1'"> 已结束</el-tag>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { computed, reactive } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import BasicContainer from '@/components/basic-container/main.vue';


// 计算总投资金额
const totalInvestment = computed(() => {
    return crudData.data.reduce((total, item) => {
        return total + parseFloat(item.test1);
    }, 0).toFixed(2);
});


const sum_option = reactive({
    span: 6,
    data: [
        {
            title: '总投资金额',
            count: totalInvestment,
            icon: "el-icon-message",
            color: "#00a7d0",
        },
    ],
})

let option: any = reactive({
    height: 'auto',
    calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    gridBtn: false,
    menu: false,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: true,
    indexWidth: 60,
    column: [
        {
            label: "编号",
            prop: "index",
            // search: true,
            sortable: true,
            span: 24,
        },
        {
            label: "用户账号",
            prop: "account",
            span: 24,
        },
        {
            label: "产品名称",
            prop: "test",
            span: 24,
        },
        {
            label: "投资金额",
            prop: "test1",
            span: 24,
        },
        {
            label: "每日收益",
            prop: "test2",
            span: 24,
        },
        {
            label: "总收益",
            prop: "test3",
            span: 24,
        },
        {
            label: "当前收益",
            prop: "test4",
            span: 24,
        },
        {
            label: "购买时间",
            prop: "test5",
            span: 24,
            sortable: true,
        },
        {
            label: "状态",
            prop: "test6",
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: [],
    selectedData: [] // 存储选中的数据
})


// 处理用户选择数据行的事件
const handleSelect = (selection, row) => {
    // 将选中的行添加到 selectedRows 数组中
    console.log('selection', selection);
    console.log('row', row);

    crudData.selectedData.push(row);
};

// 批量删除


const handleDelete = async () => {
    const selectionList = crudData.selectedData; // Assuming getSelectionRows is available
    console.log('删除前', selectionList);

    if (!selectionList || selectionList.length === 0) {
        ElMessage.warning("请选择至少一条数据");
        return;
    }

    try {
        await ElMessageBox.confirm("确定将选择的数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        });

        const ids = selectionList.map(item => item.id).join(",");
        // Assuming `remove` is a function to delete data
        // await remove(ids);

        // Reload the data or refresh the view
        onLoad();
        ElMessage.success("操作成功!");
        // Assuming toggleSelection can clear selection
        crudData.selectedData = [];
        console.log('删除后', crudData.selectedData);

    } catch (error) {
        if (error !== 'cancel') {
            console.log('Error:', error);
        }
    }
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            index: '8',
            account: '44123',
            test: 'Financial management project 1',
            test1: '600.00',
            test2: '6.00',
            test3: '42.00',
            test4: '0.00',
            test5: '2024-06-24 10:55:35',
            test6: '0',
        },
        {
            index: '7',
            account: '44123456',
            test: 'Financial management project 6',
            test1: '13133.00',
            test2: '485.92',
            test3: '177360.80',
            test4: '0.00',
            test5: '2024-01-26 10:16:16',
            test6: '0',
        },
        {
            index: '6',
            account: '4412345678',
            test: 'Financial management project 6',
            test1: '4000.00',
            test2: '148.00',
            test3: '54020.00',
            test4: '0.00',
            test5: '2024-01-23 07:26:06',
            test6: '0',
        },
        {
            index: '5',
            account: '44123456789',
            test: 'Financial management project 6',
            test1: '3000.00',
            test2: '111.00',
            test3: '40515.00',
            test4: '0.00',
            test5: '2024-01-23 07:26:02',
            test6: '0',
        },
        {
            index: '4',
            account: '44123',
            test: 'Financial management project 6',
            test1: '2000.00',
            test2: '74.00',
            test3: '27010.00',
            test4: '0.00',
            test5: '2024-01-23 07:25:58',
            test6: '0',
        },
        {
            index: '3',
            account: '441234',
            test: 'Financial management project 5',
            test1: '10000.00',
            test2: '37.00',
            test3: '13505.00',
            test4: '0.00',
            test5: '2023-05-20 08:14:59',
            test6: '0',
        },
        {
            index: '2',
            account: '44123456789',
            test: 'Financial management project 6',
            test1: '10000.00',
            test2: '280.00',
            test3: '50400.00',
            test4: '0.00',
            test5: '2024-01-23 07:25:53',
            test6: '0',
        }
    ];
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //     // crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.content-header {
    margin: 1rem;
}


.basic-container {
    position: relative;
}

.investment-summary {
    position: absolute;
    width: 12rem;
    top: 3.4rem;
    left: 1.3rem;
    z-index: 10;
}

.investment-amount {
    font-size: 24px;
    font-weight: bold;
    color: #409eff;
    text-align: center;
}

.search-and-table {
    margin-top: 100px;
}

.clear {
    clear: both;
}
</style>